<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 交互式折线图</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        #chart-container {
            width: 800px;
            height: 400px;
            margin: 20px auto;
        }
        .modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 1000;
            min-width: 280px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .modal h3 {
            margin: 0 0 20px 0;
            color: #333;
            font-size: 18px;
            font-weight: 500;
            text-align: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .modal input {
            width: 100%;
            padding: 8px 12px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        .modal input:focus {
            outline: none;
            border-color: #5470c6;
            box-shadow: 0 0 0 2px rgba(84,112,198,0.1);
        }
        .modal .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            gap: 10px;
        }
        .modal button {
            flex: 1;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s;
        }
        .modal button.update {
            background: #5470c6;
            color: white;
        }
        .modal button.delete {
            background: #ee6666;
            color: white;
        }
        .modal button.cancel {
            background: #f5f5f5;
            color: #666;
        }
        .modal button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        .modal button:active {
            transform: translateY(0);
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(2px);
            z-index: 999;
        }
        .series-select {
            margin: 15px 0;
        }
        .series-select label {
            display: block;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
        }
        .series-select select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: white;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        .series-select select:focus {
            outline: none;
            border-color: #5470c6;
            box-shadow: 0 0 0 2px rgba(84,112,198,0.1);
        }
    </style>
</head>
<body>
    <div id="chart-container"></div>
    <div class="overlay" id="overlay"></div>
    <div class="modal" id="editModal">
        <h3>编辑数据点</h3>
        <div class="series-select">
            <label>选择系列：</label>
            <select id="seriesSelect"></select>
        </div>
        <input type="number" id="valueInput" placeholder="输入新值">
        <div class="button-group">
            <button class="update" onclick="updateDataPoint()">更新</button>
            <button class="delete" onclick="deleteDataPoint()">删除</button>
            <button class="cancel" onclick="closeModal()">取消</button>
        </div>
    </div>

    <script>
        let chart = echarts.init(document.getElementById('chart-container'));
        let currentDataIndex = -1;
        let currentSeriesIndex = -1;
        let clickPosition = { x: 0, y: 0 };

        // 示例数据 - 二维数组
        const seriesData = [
            [120, 132, 101, 134, 90, 230],  // 系列1的数据
            [220, 182, 191, 234, 290, 330], // 系列2的数据
            [150, 232, 201, 154, 190, 330]  // 系列3的数据
        ];

        const seriesNames = ['数据系列1', '数据系列2', '数据系列3'];
        const colors = ['#5470c6', '#91cc75', '#fac858'];

        // 生成系列配置
        const series = seriesData.map((data, index) => ({
            name: seriesNames[index],
            type: 'line',
            data: data,
            symbolSize: 10,
            itemStyle: {
                color: colors[index]
            },
            emphasis: {
                focus: 'series'
            }
        }));

        let option = {
            title: {
                text: '多系列交互式折线图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: seriesNames
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
            },
            yAxis: {
                type: 'value'
            },
            series: series
        };

        chart.setOption(option);

        // 点击事件处理
        chart.on('click', function(params) {
            if (params.componentType === 'series') {
                currentDataIndex = params.dataIndex;
                currentSeriesIndex = params.seriesIndex;
                clickPosition = {
                    x: params.event.offsetX,
                    y: params.event.offsetY
                };
                showModal(params.value);
            }
        });

        // 显示模态框
        function showModal(value) {
            const modal = document.getElementById('editModal');
            const overlay = document.getElementById('overlay');
            const seriesSelect = document.getElementById('seriesSelect');
            
            // 更新系列选择下拉框
            seriesSelect.innerHTML = '';
            seriesNames.forEach((name, index) => {
                const option = document.createElement('option');
                option.value = index;
                option.text = name;
                option.selected = index === currentSeriesIndex;
                seriesSelect.appendChild(option);
            });

            // 设置模态框位置
            const chartRect = document.getElementById('chart-container').getBoundingClientRect();
            const modalWidth = modal.offsetWidth;
            const modalHeight = modal.offsetHeight;
            
            // 计算模态框位置，确保不超出视窗
            let left = chartRect.left + clickPosition.x;
            let top = chartRect.top + clickPosition.y;
            
            // 调整位置，确保模态框完全可见
            if (left + modalWidth > window.innerWidth) {
                left = window.innerWidth - modalWidth - 20;
            }
            if (top + modalHeight > window.innerHeight) {
                top = window.innerHeight - modalHeight - 20;
            }
            
            modal.style.left = left + 'px';
            modal.style.top = top + 'px';
            
            document.getElementById('valueInput').value = value;
            overlay.style.display = 'block';
            modal.style.display = 'block';
        }

        // 关闭模态框
        function closeModal() {
            document.getElementById('overlay').style.display = 'none';
            document.getElementById('editModal').style.display = 'none';
            currentDataIndex = -1;
            currentSeriesIndex = -1;
        }

        // 更新数据点
        function updateDataPoint() {
            const newValue = parseFloat(document.getElementById('valueInput').value);
            const selectedSeriesIndex = parseInt(document.getElementById('seriesSelect').value);
            
            if (!isNaN(newValue)) {
                seriesData[selectedSeriesIndex][currentDataIndex] = newValue;
                option.series[selectedSeriesIndex].data = seriesData[selectedSeriesIndex];
                chart.setOption(option);
                closeModal();
            }
        }

        // 删除数据点
        function deleteDataPoint() {
            const selectedSeriesIndex = parseInt(document.getElementById('seriesSelect').value);
            
            // 删除所有系列在该位置的数据点
            seriesData.forEach((series, index) => {
                series.splice(currentDataIndex, 1);
                option.series[index].data = series;
            });
            
            // 删除对应的x轴标签
            option.xAxis.data.splice(currentDataIndex, 1);
            
            chart.setOption(option);
            closeModal();
        }

        // 窗口大小改变时重绘图表
        window.addEventListener('resize', function() {
            chart.resize();
        });
    </script>
</body>
</html> 